<template>
  <div class="color-selector">

    <q-avatar class="toolbar-button" text-color="black" color="white" icon="menu_open" square size="48px"
      font-size="36px">
      <q-menu persistent>
        <q-list style="min-width: 100px">
          <q-item clickable>
            <q-item-section top avatar>
              <q-avatar square>
                <img src="phaser/editicon_880x881.png" width="48px" />
              </q-avatar>
            </q-item-section>
            <q-item-section>
              <q-item-label>Цвет фона</q-item-label>
            </q-item-section>
            <q-item-section side>
              <q-icon name="chevron_right" color="black" />
            </q-item-section>
            <q-menu>
              <q-list style="min-width: 100px">
                <q-separator />
                <q-item clickable v-for="(colorCode, colorName) in colors" :key="colorName"
                  @click="changeColor(colorCode)" class="color-item">
                  <q-item-section avatar>
                    <div class="color" :style="{ background: colorCode }">
                    </div>
                  </q-item-section>
                  <q-item-section class="color-name">{{ colorName }}</q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </q-item>

        </q-list>
      </q-menu>
    </q-avatar>

  </div>
</template>


<script lang="ts">
import { defineComponent } from 'vue';
import { usePhaserStore } from '../stores/phaserStore';
import { useUiStore } from '../stores/UI';
import { mapState, mapActions } from 'pinia';
export default defineComponent({
  name: 'colorSelector',
  data() {
    return {
      colors: {
        красный: '#ff0000',
        green: '#00ff00',
        blue: '#0000ff',
        tomato: '#f36',
        darkcyan: '#008b8b',
        darkgoldenrod: '#b8860b',
        darkgrey: '#a9a9a9',
        darkgreen: '#006400',
        darkkhaki: '#bdb76b',
        darkmagenta: '#8b008b',
        darkolivegreen: '#556b2f',
        darkorange: '#ff8c00',
        darkorchid: '#9932cc',
        darkred: '#8b0000',
        darksalmon: '#e9967a',
        darkseagreen: '#8fbc8f',
        darkslateblue: '#483d8b',
        darkslategrey: '#2f4f4f',
        darkturquoise: '#00ced1',
        darkviolet: '#9400d3',
        deeppink: '#ff1493',
        deepskyblue: '#00bfff',
        dimgrey: '#696969',
        dodgerblue: '#1e90ff',
        firebrick: '#b22222',
        floralwhite: '#fffaf0',
        forestgreen: '#228b22',
        fuchsia: '#ff00ff',
        gainsboro: '#dcdcdc',
        ghostwhite: '#f8f8ff',
        gold: '#ffd700',
        goldenrod: '#daa520',
        grey: '#808080',
        greenyellow: '#adff2f',
        honeydew: '#f0fff0',
        hotpink: '#ff69b4',
        indianred: '#cd5c5c',
        indigo: '#4b0082',
        ivory: '#fffff0',
        khaki: '#f0e68c',
        lavender: '#e6e6fa',
        lavenderblush: '#fff0f5',
        lawngreen: '#7cfc00',
        lemonchiffon: '#fffacd',
        lightblue: '#add8e6',
        lightcoral: '#f08080',
        lightcyan: '#e0ffff',
        lightgoldenrodyellow: '#fafad2'


      }

    };
  },
  computed: {
    ...mapState(usePhaserStore, ['endlessKanvasScene']),
    ...mapState(useUiStore, { uiColor: 'color' }),
  },
  methods: {
    ...mapActions(useUiStore, { setColor: 'setColor' }),
    changeColor(color) {

      this.setColor(color);
      this.endlessKanvasScene.cameras.main.setBackgroundColor(this.uiColor);
    }
  }
});
</script>
<style scoped>
.color-selector {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 1px;
  pointer-events: initial;
  height: 100%;
}

.color-item {
  display: flex;
  align-items: center;
}

.color {
  width: 20px;
  /* Установленный размер для круга */
  height: 20px;
  /* Установленный размер для круга */
  border-radius: 50%;
  /* Делает элемент круглым */
  cursor: pointer;
  display: inline-block;
}

.color-name {
  margin-left: -20px;
  /* Расстояние между цветом и его названием */
  display: inline-block;
}

.toolbar-button {
  border-radius: 5px;
}
</style>
